<template>
  <div class="page" id="shoppage">

    <div style="height: 44px;display: flex;align-items: center;justify-content: space-between;padding: 0 12px;">
      <i class="Icon" style="width: 44px;height: 44px;line-height: 44px;font-size: 20px;"
        @click="backHandle()">arrow_back_ios_new</i>
    </div>
    <!-- body -->
    <div>
      <!-- info -->
      <div style="display: flex; padding: 12px">
        <div style="font-size: 26px;min-width: 130px;">{{ info.name }}</div>
        <div style="width: 40px"></div>
        <div style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 260px;
        ">
          <i class="Icon" style="font-size: 20px">local_phone</i>
          <div style="color: #333333; font-size: 14px; text-align: right">
            {{ info.phone }}
          </div>
        </div>
      </div>

      <!-- img -->
      <van-image :src="info.img" mode="" width="100%"></van-image>
      <!-- desc -->
      <div style="border: 2px solid #ebebeb; margin: 12px; padding: 12px">
        <div style="
          font-size: 14px;
          color: #999999;
          border: 1px dashed #ebebeb;
          padding: 12px;
        ">
          {{ info.desc }}
        </div>
      </div>

      <!-- show2 -->
      <van-sticky v-if="showsk">
        <div style="
          background-color: #ffffff;
          padding: 12px 0;
          margin: 0 12px;
          display: flex;
          align-items: center;
        ">
          <div style="
            flex: 2;
            padding: 12px;
            height: 36px;
            background-color: #f5f7fb;
            border-radius: 18px;
            line-height: 35px;
            padding: 0 12px;
            display: flex;
            align-items: center;
          ">
            <div style="flex: 1" @click="cateViewClickHandle()">
              {{ cates[cateidx] }}
            </div>
            <i class="Icon">expand_more</i>
          </div>
          <div style="flex: 1">
            <van-field type="text" label="" placeholder="search" style="
              border-radius: 18px;
              background-color: #f5f7fb;
              height: 36px;
              line-height: 36px;
              padding: 0 12px;
            " />
          </div>
        </div>
      </van-sticky>
      <!-- show1 -->
      <div style="padding: 12px; font-size: 20px" v-if="showcatetitle">
        {{ cates[cateidx] }}
      </div>
      <!-- foodlist -->
      <div id="foodlist" style="background-color: #ffffff; padding: 0 12px">
        <div id="cate" v-for="(item, idx) in cates.length" :key="idx">
          <div style="
            display: flex;
            margin-top: 10px;
            background-color: #ffffff;
            padding: 12px;
            border: 1px solid #ebebeb;
          " v-for="(item, index) in info.foods" :key="index" @click="foodItemClickHandle(item)">
            <van-image :src="item.img" mode="" style="width: 70px; height: 70px; border: 1px solid #ebebeb">
            </van-image>
            <div style="
              flex: 1;
              padding-left: 12px;
              line-height: 16px;
              display: flex;
              flex-direction: column;
            ">
              <div style="
                font-size: 14px;
                word-wrap: break-word;
                word-break: break-word;
                flex: 1;
              ">
                {{ item.name }}
              </div>
              <div style="flex: 1; font-size: 12px; color: #999999">
                some descsome descsome descsome descsome descsome desc
              </div>
              <div>
                <!-- food -->
                <div style="display: flex; align-items: baseline">
                  <div style="font-size: 12px">$</div>
                  <div style="font-size: 16px">{{ item.price }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end foodlist -->
    </div>

    <van-popup v-model="showModal" position="bottom" :style="{ height: '60%' }">
      <div v-for="(item, idx) in cates" :key="idx" style="padding: 12px; border-bottom: 1px solid #ebebeb"
        @click="scrollTo(idx)">
        {{ item }}
      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cates: ["分类0", "分类1", "分类2", "分类3", "分类4", "分类5", "分类6"],
        cateidx: 0,
        showsk: false,
        showcatetitle: true,

        showModal: false,
        buyType: -1,
        addedFoods: [],
        info: {
          name: "胜意大酒店",
          phone: "0898-88915522",
          img: "https://p0.meituan.net/biztone/6828281_1629172615728.jpeg@380w_214h_1e_1c",
          desc: "地址：天涯区三亚湾路35号胜意大酒店1楼（吉祥街与三亚湾路交汇处）（胜意大酒店内一楼）",
          foods: [
            {
              name: "海鲜无限量供应BBQ自助晚餐",
              img: "https://p1.meituan.net/208.126/deal/d7e22604fe3872715897494305612c0254275.jpg@100w_100h_1e_1c",
              price: "208",
            },
            {
              name: "海鲜自助午餐火锅",
              img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
              price: "208",
            },
            {
              name: "海鲜自助午餐火锅",
              img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
              price: "208",
            },
            {
              name: "海鲜自助午餐火锅",
              img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
              price: "208",
            },
            {
              name: "海鲜自助午餐火锅",
              img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
              price: "208",
            },
            {
              name: "海鲜自助午餐火锅",
              img: "https://p1.meituan.net/208.126/deal/8b1065fa8ecef145c423a8d6e42fdcc7773637.jpg@100w_100h_1e_1c",
              price: "208",
            },
            {
              name: "儿童自助晚餐",
              img: "https://p0.meituan.net/208.126/deal/9d044934a49009a58e701354830c1dfc766911.jpg@100w_100h_1e_1c",
              price: "208",
            },
          ],
        },
        shopcarNum: 0,
      };
    },
    mounted() {
      let dom = document.getElementById("shoppage");
      dom.addEventListener("scroll", this.onScroll, false);
      let json = localStorage.getItem("shopcar");
      if (json != undefined && json.length != 0) {
        let order = JSON.parse(json);
        this.shopcarNum = order.foods.length;
      }
    },
    methods: {
      backHandle() {
        this.$router.go(-1);
      },

      onScroll() {
        let dom = document.getElementById("shoppage");
        // 获取所有锚点元素
        const navContents = document.querySelectorAll("#cate");
        // 所有锚点元素的 offsetTop
        const offsetTopArr = [];
        navContents.forEach((item) => {
          offsetTopArr.push(item.offsetTop);
        });
        // 获取当前文档流的 scrollTop
        const scrollTop = dom.scrollTop || document.body.scrollTop;
        // 定义当前点亮的导航下标
        let navIndex = 0;
        for (let n = 0; n < offsetTopArr.length; n++) {
          // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
          // 那么此时导航索引就应该是n了
          if (scrollTop >= offsetTopArr[n]) {
            navIndex = n;
          }
        }

        this.cateidx = navIndex;
        this.active = navIndex;

        //   hide or show

        let y = offsetTopArr[0] - scrollTop;
        if (y <= 70) {
          this.showsk = true;
          this.showcatetitle = false;
        } else {
          this.showsk = false;
          this.showcatetitle = true;
        }
      },

      scrollTo(idx) {
        let dom = document.getElementById("shoppage");

        this.cateidx = idx;
        this.showModal = false;

        // 获取目标的 offsetTop
        const targetOffsetTop = document.querySelectorAll(`#cate`)[idx].offsetTop;
        // 获取当前 offsetTop
        let scrollTop = dom.scrollTop || document.body.scrollTop;
        // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉，步子迈大了会扯到蛋
        const STEP = 100;
        // 判断是往下滑还是往上滑
        if (scrollTop > targetOffsetTop) {
          // 往上滑
          smoothUp();
        } else {
          // 往下滑
          smoothDown();
        }
        // 定义往下滑函数
        function smoothDown() {
          // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
          if (scrollTop < targetOffsetTop) {
            // 如果和目标相差距离大于等于 STEP 就跳 STEP
            // 否则直接跳到目标点，目标是为了防止跳过了。
            if (targetOffsetTop - scrollTop >= STEP) {
              scrollTop += STEP;
            } else {
              scrollTop = targetOffsetTop;
            }
            document.body.scrollTop = scrollTop;
            dom.scrollTop = scrollTop;
            // 关于 requestAnimationFrame 可以自己查一下，在这种场景下，相比 setInterval 性价比更高
            requestAnimationFrame(smoothDown);
          }
        }
        // 定义往上滑函数
        function smoothUp() {
          if (scrollTop > targetOffsetTop) {
            if (scrollTop - targetOffsetTop >= STEP) {
              scrollTop -= STEP;
            } else {
              scrollTop = targetOffsetTop;
            }
            document.body.scrollTop = scrollTop;
            document.documentElement.scrollTop = scrollTop;
            requestAnimationFrame(smoothUp);
          }
        }
        // end
      },

      cateViewClickHandle() {
        this.showModal = true;
      },

      foodItemClickHandle(item) {
        console.log(item);

        this.$router.push({
          path: "/food",
        });
      },
      shopCarHandle() {
        this.$router.push({
          path: "/shopcar",
        });
      },
    },
  };
</script>


<style>
  .van-index-bar__sidebar {
    display: none;
  }
</style>

<style scoped>
  .page {
    flex: 1;
    overflow-y: auto;
    position: relative;
    background-color: #ffffff;
    padding-bottom: 64px;
  }

  .shopcar {
    height: 44px;
    width: 44px;
    border-radius: 22px;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 20px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: constant(safe-area-inset-top);
    margin-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }
</style>